<template>
<div class="register_container">
  <el-container>
    <el-header >
      <el-avatar icon="el-icon-user-solid"  shape="circle"></el-avatar>
      <span class="login">
          <em class="bold">已有账号？</em>
          <a href="/login">
            <el-button type="primary" size="small">登录</el-button>
          </a>
        </span>
    </el-header >
    <el-main>

      <el-row type="flex" justify="center">
        <el-col :span="6">

          <el-form  ref="form" :rules="rules" :model="customer" label-width="80px">

            <el-form-item label="昵称" prop="name">
              <el-input placeholder="请输入用户昵称" v-model="customer.name"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input placeholder="请输入电话" v-model="customer.phone"></el-input>
            </el-form-item>
            <el-form-item label="登录账号" prop="account">
              <el-input placeholder="请输入自定义账号" v-model="customer.account"></el-input>
            </el-form-item>
            <el-form-item  label="密码" prop="password">
              <el-input type="password" placeholder="请输入密码" v-model="customer.password"></el-input>
            </el-form-item>
            <el-form-item  label="确认密码" prop="cpassword">
              <el-input type="password" placeholder="请输入密码" v-model="customer.cpassword"></el-input>
            </el-form-item>



            <el-form-item>
              <el-button type="primary" @click="add('form')">确定</el-button>
              <el-button  @click="resetBtn('form')">重置</el-button>
            </el-form-item>
          </el-form>
          <div class="grid-content bg-purple-dark"></div></el-col>
      </el-row>

    </el-main>
  </el-container>
</div>
</template>

<script>
export default {
  data(){
    return{
      customer:{
        name:'',
        phone:'',
        account:'',
        password:'',
        cpassword:'',
        // createTime: '',  //现在时间

      },


      rules: {
        name: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
        ],
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { min:11, max: 11, message: '电话格式不正确', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur' }
        ],
        cpassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'))
              } else if (value !== this.customer.password) {
                callback(new Error('两次输入密码不一致'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],

      }
    }
  },
  methods: {
    add(form){
      //获取表单校验结果
      this.$refs[form].validate((valid) => {
        if (valid) {

          this.$axios.get('api/customer/queryAccount?account='+this.customer.account)
              .then(res=>{
                console.log(res.data)
                if (res.data.code==200){
                  this.$axios.get('api/customer/insertRegister?name='+this.customer.name+'&phone='+this.customer.phone
                      +'&account='+this.customer.account+'&password='+this.customer.password).then(resp=>{
                    if(resp.data.code==200){
                      this.$message({
                        message: '注册成功',
                        type: 'success'
                      });
                      this.$router.push('register');
                    }
                  })
                }else{
                  this.$message({
                    message: '账号已存在',
                    type: 'error'
                  });
                }
              })




        } else {
          this.$message({
            message: '信息未填写完整',
            type: 'error',
            duration:2000//单位是毫秒
          });
        }
      });

    }
  },
  created() {


  }

}
</script>

<style>
.register_container{
  background-image: url(https://api.vvhan.com/api/bing?rand=sj);

}
.el-header{

}
.el-main{
  height: 550px;

 }

</style>